<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-30 19:03:13
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-06 13:44:12
 * @FilePath: \dance\pages\me\me.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="me">
    <uv-status-bar bgColor="#fff"></uv-status-bar>
    <template v-if="trainee.isShow">
      <view class="me-head">
        <button class="reset-button me-head-avatar" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
          <uv-avatar :src="headerpic" size="140rpx" mode="aspectFill"></uv-avatar>
        </button>
        <view class="me-head-center">
          <input type="nickname" v-model="trainee.name" class="me-head-center-name" @change="onChangeUserName" />
          <text class="me-head-center-num" selectable user-select>去卡号：{{ state.vuex_user.serial }}</text>
        </view>
      </view>
      <view class="me-oper">
        <view class="me-oper-item" @click="handleOrder">
          <view class="icon">
            <image :src="'../../static/img/order.png'" style="width: 100%; height: 100%" mode="aspectFill" />
          </view>
          我的订单
        </view>
        <view class="me-oper-line"></view>
        <view class="me-oper-item" @click="handleCollect">
          <view class="icon">
            <image :src="'../../static/img/shoucang-click.png'" style="width: 100%; height: 100%" mode="aspectFill" />
          </view>
          我的收藏
        </view>
      </view>
      <view class="me-box">
        <view class="me-box-title">
          <text class="text">最近订单</text>
        </view>
        <view class="me-box-content">
          <view class="main">
            <view v-for="item in trainee.transactions" class="main-item">
              <view class="main-item-top">
                <view>
                  {{ item.merchant.name }}
                </view>
                <view> {{ dayjs(item.lesson.issueDate).format('YYYY-MM-DD') }} {{ item.lesson.timeDuration }} </view>
              </view>
              <view class="main-item-bottom">
                <view class="primary">{{ item.lesson.name }}</view>
                <view class="grade">{{ gradeOptions.find(r => r.val === item.lesson.grade).label }}</view>
                <view>{{ item.lesson.lessonState }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <view v-else style="flex: 1; overflow: hidden">
      <teacherView />
    </view>
    <view class="me-buttons">
      <button open-type="contact" class="me-buttons-item reset-button">
        <uv-icon name="kefu" custom-prefix="custom-icon" color="rgba(177, 177, 177, 1)" size="61rpx" class="icon"></uv-icon>联系客服
      </button>
      <view class="me-buttons-item" @click="trainee.isShow = !trainee.isShow" v-if="isTeacher">
        <uv-icon name="qiehuan" custom-prefix="custom-icon" color="rgba(177, 177, 177, 1)" size="61rpx" class="icon"></uv-icon>
        切换{{ trainee.isShow ? '老师' : '学员' }}
      </view>
    </view>
  </view>
</template>

<script setup>
  import teacherView from './teacherView.vue';
  import { defaultImages, gradeOptions } from '@/common/js/global.js';
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import { onHide, onShow, onShareAppMessage, onLoad, onReady } from '@dcloudio/uni-app';
  import { ref, reactive, computed, nextTick } from 'vue';
  import { uploadFn } from '@/common/js/fn';
  import curriculum from './components/curriculum.vue';
  import collectVideo from './components/collectVideo.vue';
  import collect from './components/collect.vue';
  import screen from './components/screen.vue';
  import sort from './components/sort.vue';
  import store from '@/store/index.js'; //需要引入store
  let { state, commit } = store;
  let trainee = reactive({
    name: '',
    isShow: true,
    transactions: []
  });
  let headerpic = computed(() => {
    return state.vuex_user.headerpic || defaultImages[2];
  });
  const httpUser = async () => {
    let data = await uni.$uv.http.post('app/wechat/user');
    commit('$uStore', {
      name: 'vuex_user',
      value: data
    });
    trainee.name = data.nickname;
  };
  let isTeacher = computed(() => {
    return state.vuex_user.isTeacher;
  });
  // 获取头像的回调
  const onChooseavatar = async val => {
    let file_path = await uploadFn(val.detail.avatarUrl);
    uni.$uv.http.post('app/wechat/update_headerpic', {
      headerpic: file_path
    });
    commit('$uStore', {
      name: 'vuex_user',
      value: { ...state.vuex_user, headerpic: file_path }
    });
    toastRef.value.show({
      overlay: false,
      message: `更新头像成功`,
      type: 'success'
    });
  };
  // 前往订单详情页
  const handleOrder = () => {
    uni.navigateTo({
      url: '/pages/order/index'
    });
  };
  const handleCollect = () => {
    uni.navigateTo({
      url: '/pages/collect/index'
    });
  };

  let httpMineCollect = async () => {
    const { hasUsed, pendingUse, pagination, transactions } = await uni.$uv.http.post(`app/transaction/list`, {
      currentPage: 1,
      pageSize: 10, //每页数量
      query: '', //关键字搜索
      usageStatus: -1 //订单是否使用 -1所有，0待使用 1已使用
    });
    trainee.transactions = transactions.filter(r => r.lesson.id);
  };
  let init = () => {
    httpUser();
    httpMineCollect();
  };
  init();
  // 昵称回调
  const onChangeUserName = async val => {
    if (!val.detail.value) return;
    // 如果名称没变化，不调用接口
    if (state.vuex_user.nickname === val.detail.value) return;
    await uni.$uv.http.post('app/wechat/update_nickname', {
      nickname: val.detail.value
    });
    trainee.name = val.detail.value;
    commit('$uStore', {
      name: 'vuex_user',
      value: { ...state.vuex_user, nickname: val.detail.value }
    });
    toastRef.value.show({
      overlay: false,
      message: `更新昵称成功`,
      type: 'success'
    });
  };
  onShareAppMessage(() => {
    if (isTeacher.value) {
      // 如果是个老师就去老师的页面，如果不是就去首页
      uni.$uv.mpShare = {
        title: `#去卡#我是 ${state.vuex_user.teacher.username}`, // 默认为小程序名称
        path: `/pages/me/share?id=${state.vuex_user.teacher.id}` // 默认为当前页面路径路径
      };
    }
  });
</script>

<style lang="scss" scoped>
  // 去除button的所有默认样式，让其表现跟普通的view、text元素一样
  .reset-button {
    padding: 0;
    margin: 0;
    background-color: transparent;
    /* #ifndef APP-PLUS */
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    /* #endif */
    /* #ifdef APP-NVUE */
    border-width: 0;
    /* #endif */
    &::after {
      border: 0;
    }
  }

  .me {
    background: rgba(250, 250, 250, 1);
    height: 100vh;
    color: #fff;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    color: rgba(0, 0, 0, 1);
    font-family: Source Han Sans CN;
    font-size: 24.419rpx;
    &-head {
      background: rgba(255, 255, 255, 1);
      display: flex;
      position: relative;
      height: 174.419rpx;
      &-avatar {
        position: absolute;
        left: 17rpx;
        top: -17.442rpx;
      }
      &-center {
        position: absolute;
        top: 26.163rpx;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &-name {
          font-family: Source Han Sans CN;
          font-size: 34.884rpx;
          font-weight: 700;
          text-align: center;

          text-align: center;
          color: rgba(0, 0, 0, 1);
        }

        &-num {
          font-size: 22.674rpx;
          font-weight: 400;
          color: rgba(149, 149, 149, 1);
          margin-top: 31.395rpx;
        }
      }
    }
    &-oper {
      background: rgba(0, 0, 0, 1);
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
      width: 708.14rpx;
      height: 90.698rpx;
      border-radius: 0px 0px 19.186rpx 19.186rpx;
      margin: 0 auto;
      color: #fff;
      display: flex;
      align-items: center;
      &-item {
        flex: 1;
        font-size: 27.907rpx;
        font-weight: 400;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 55.814rpx;
          height: 55.814rpx;
          margin-right: 31.395rpx;
        }
      }
      &-line {
        height: 60%;
        width: 1.744rpx;
        background: rgba(177, 177, 177, 1);
        line-height: 80%;
      }
    }
    &-box {
      flex: 1;
      margin-top: 47.093rpx;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      &-title {
        width: 211.047rpx;
        height: 55.814rpx;
        border-top-left-radius: 19.186rpx;
        border-top-right-radius: 19.186rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);

        font-weight: 900;
        text-align: center;
        .text {
          line-height: 73.256rpx;
          color: rgba(84, 84, 84, 1);
        }
      }
      &-content {
        flex: 1;
        overflow: auto;
        background-color: #fff;
        width: 100%;
        min-height: 174.419rpx;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        .main {
          padding: 27.907rpx 20.93rpx;
          &-item {
            background: rgba(240, 240, 240, 1);
            height: 143.023rpx;
            background: rgba(240, 240, 240, 1);
            border-radius: 19.186rpx;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);

            color: rgba(149, 149, 149, 1);
            margin-bottom: 13.953rpx;
            display: flex;
            flex-direction: column;
            &-top {
              display: flex;
              flex: 1;
              align-items: center;
              justify-content: space-around;
            }
            &-bottom {
              display: flex;
              flex: 1;
              align-items: center;
              justify-content: space-around;
              .primary {
                color: rgba(0, 0, 0, 1);
              }
              .grade {
                background: rgba(97, 71, 178, 1);
                font-size: 19.186rpx;
                font-weight: 900;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                padding: 3px 10.465rpx;
              }
            }
          }
        }
      }
    }
    &-buttons {
      margin-top: 24.419rpx;
      width: 100%;
      background-color: #fff;
      height: 109.884rpx;
      display: flex;
      color: rgba(149, 149, 149, 1);

      &-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          margin-right: 17.442rpx;
        }
      }
    }
  }
</style>
<style scoped>
  uni-button:after {
    border: none !important;
  }
</style>
